<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>LazyEgg首页</title>


<link href="${pageContext.request.contextPath}/css/bootstrap.min.css"
	rel="stylesheet">
<!-- 购物车 必须加  开始-->
<link rel="stylesheet" type="text/css"
	href="${pageContext.request.contextPath}/css/shoppingCarCover.css">
<!-- 购物车 必须加 结束 -->
<link href="${pageContext.request.contextPath}/css/foot.css"
	rel="stylesheet">
<link href="${pageContext.request.contextPath}/css/head2.css"
	rel="stylesheet">
<link href="${pageContext.request.contextPath}/css/index2.css"
	rel="stylesheet">
<link href="${pageContext.request.contextPath}/css/shoppingCar2.css"
	rel="stylesheet">


<script src="${pageContext.request.contextPath}/script/jquery-1.11.3.js"></script>
<script src="${pageContext.request.contextPath}/bootstrap/js/bootstrap.min.js"></script>
<script src="${pageContext.request.contextPath}/script/shoppingCarJs2.js"></script>
<script type="text/javascript">
	/* 导航条 */
	$(window).scroll(function() {
		if ($(".navbar").offset().top > 50) {
			$(".navbar-fixed-top").addClass("top-nav");
		} else {
			$(".navbar-fixed-top").removeClass("top-nav");
		}
	});
	
	$(function() {
		/* 内容 */
		$('[data-toggle="popover"]').popover();
		
		//新闻无缝滚动 开始
		var speed = 40;
		var demo = document.getElementById("pxr_news");
		var demo1 = document.getElementById("pxr_newsul");
		var demo2 = document.getElementById("pxr_newsul2");
		
		
		demo2.innerHTML = demo1.innerHTML
		function Marquee() {
			if (demo.scrollTop >= demo1.offsetHeight) {
				demo.scrollTop = 0;
			} else {
				demo.scrollTop = demo.scrollTop + 1;
			}
		}
		var MyMar = setInterval(Marquee, speed)
		demo.onmouseover = function() {
			clearInterval(MyMar)
		}
		demo.onmouseout = function() {
			MyMar = setInterval(Marquee, speed)
		}
		//新闻无缝滚动 结束

	});

	/* 尺寸价格开始 */
    $(function(){
        $(".sizeItem").on("click",function(){
        	$(this).siblings().css("background-color","");
        	$(this).css("background-color","#FF8C00");
            $(this).parent().parent().next().find("span").text($(this).attr("data-ref"))
          
            $(this).parents("form").find(".selectedId").val($(this).prev().val());
            $(this).parents("form").find(".orderNowBtn").attr("data-ref",$(this).prev().val());
            
            
        })
    })
	/* 尺寸价格结束 */
</script>
<script type="text/javascript">
	$(function(){
		
		$(".orderNowBtn").click(function(){
			if($(this).attr("data-ref")==""){
				alert("请选择份量，谢谢！");
				return false;
			}
		});
	});
	
</script>
<style type="text/css">
.sizeItemColor{
	background-color:#ec971f;
}

</style>
</head>
<body>
	<!--遮罩层 开始-->
	<c:import url="/shared/ShoppingCover.jsp" />
	<!--遮罩层 结束-->

	<div class="container">
		<!-- 回到顶部 开始-->
		<c:import url="/shared/returnTop.jsp" />
		<!--回到顶部 结束-->

		<!--导航-->
		<c:import url="/shared/header.jsp" />
		<!--导航结束-->

		<c:if test="${not empty sessionScope.user }">
			<!--购物车按钮 开始-->
			<c:import url="/shared/shoppingCarBtn.jsp" />
			<!--购物车按钮 结束-->
		</c:if>

		<!--轮播-->
		<div class="row">
			<div id="carousel-example-generic" class="carousel slide"
				data-ride="carousel">
				<!-- Indicators -->
				<ol class="carousel-indicators">
					<li data-target="#carousel-example-generic" data-slide-to="0"
						class="active"></li>
					<li data-target="#carousel-example-generic" data-slide-to="1"></li>
					<li data-target="#carousel-example-generic" data-slide-to="2"></li>
				</ol>
				<!--新闻轮播 开始-->
				<div id="pxr_news">
					<ul id="pxr_newsul">
					
						<c:forEach var="news" items="${newslist }">
							<li ><a href="#" style="font-size: 12px">${news.title }</a></li>
						</c:forEach>
						<c:forEach var="news" items="${newslist }">
							<li ><a href="#" style="font-size: 12px">${news.title }</a></li>
						</c:forEach>
						<c:forEach var="news" items="${newslist }">
							<li ><a href="#" style="font-size: 12px">${news.title }</a></li>
						</c:forEach>
						
					</ul>
					<div id="pxr_newsul2"></div>
				</div>
				<!--新闻轮播 结束-->
				<!-- Wrapper for slides -->
				<div class="carousel-inner" role="listbox">
					<div class="item active">
						<img
							src="${pageContext.request.contextPath}/image/lunbo/haibao01.jpg"
							alt="...">
						<div class="carousel-caption">小龙虾乐翻天</div>
					</div>
					<div class="item">
						<img
							src="${pageContext.request.contextPath}/image/lunbo/haibao02.jpg"
							alt="...">
						<div class="carousel-caption">开心随你拼</div>
					</div>
					<div class="item">
						<img
							src="${pageContext.request.contextPath}/image/lunbo/haibao03.jpg"
							alt="...">
						<div class="carousel-caption">披萨无限优惠</div>
					</div>
				</div>

				<!-- Controls -->
				<a class="left carousel-control" href="#carousel-example-generic"
					role="button" data-slide="prev"> <span
					class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
					<span class="sr-only">Previous</span>
				</a> <a class="right carousel-control" href="#carousel-example-generic"
					role="button" data-slide="next"> <span
					class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
					<span class="sr-only">Next</span>
				</a>
			</div>
		</div>
		<!--推介-->
		<div class="row">
			<!--披萨推介-->
			<div class="panel panel-default opacity noBorder litHeight">
				<div class="panel-heading" style="background: rgba(0, 0, 0, 0);">
					<span class="blackOpacity  recommend">披萨推介</span>
				</div>
				<div class="panel-body">
					<div class="row opacity">
						<c:forEach var="food" items="${requestScope.pizzaList }" end="2">
							<form action="ShoppingCar" method="get">
								<input type="hidden" class="selectedId" name="selectedId"/>
								<div class="col-sm-6 col-md-4">
									<div class="thumbnail opacity noBorder blackOpacity">
										<img src="image/foods/${food.imageFile }" alt="...">
										<div class="caption">
											<h3 style="margin-top: 20px;">${food.foodName }</h3>
											<div class="btn-toolbar">
												<div class="btn-group" style="margin-top: 20px;">
													<div class="btn btn-primary-active sizeItem" >
														<span>份量</span>
													</div>
													<c:forEach var="rate" items="${requestScope.ratelist }">
														<c:if test="${food.fId==rate.food.fId }">
															<input type="hidden" value="${rate.rateId}">
															<a class="btn btn-primary sizeItem " data-ref="${rate.ratioPrice}"> 
																<span>${rate.foodSize.foodSizeName}</span>
															</a>
														</c:if>
													</c:forEach>	
												</div>
											</div>
											<div class="ljm-price-mark">
												￥<span class="ljm-price-num">${food.foodprice }</span>
											</div>
											<div class="popover fade left in"></div>
											<div class="foodsdetail">
												<a class="foodsdetail-a " tabindex="0" role="button"
													data-toggle="popover" data-trigger="focus"
													title="${food.foodName }"
													data-content="${food.description }"> 商品详情</a>
											</div>
											<p class="OrderBtnCenter">
												<c:choose>
													<c:when test="${not empty sessionScope.user }">
														<button class="btn btn-warning OrderBtn orderNowBtn" role="button" data-ref="" >立即下单</button>
													</c:when>
													<c:otherwise>
														<button class="btn btn-warning OrderBtn orderNowBtn" role="button" data-ref="" disabled="disabled">立即下单</button>
													</c:otherwise>
												</c:choose>
											</p>
										</div>
									</div>
								</div>
							</form>
						</c:forEach>
					</div>
				</div>
			</div>
			<!--小吃推介-->
			<div class="panel panel-default opacity noBorder litHeight">
				<div class="panel-heading" style="background: rgba(0, 0, 0, 0);">
					<span class="blackOpacity  recommend">小吃推介</span>
				</div>
				<div class="panel-body">
					<div class="row opacity">
						<c:forEach var="food" items="${requestScope.snackList }" end="2">
							<form action="ShoppingCar"  method="get">
								<input type="hidden" class="selectedId" name="selectedId"/>
								<div class="col-sm-6 col-md-4">
									<div class="thumbnail opacity noBorder blackOpacity">
										<img src="image/foods/${food.imageFile }" alt="...">
										<div class="caption">
											<h3 style="margin-top: 20px;">${food.foodName }</h3>
											<div class="btn-toolbar">
												<div class="btn-group" style="margin-top: 20px;">
													<div class="btn btn-primary-active sizeItem">
														<span>份量</span>
													</div>
													<c:forEach var="rate" items="${requestScope.ratelist }">
														<c:if test="${food.fId==rate.food.fId }">
															<input type="hidden" value="${rate.rateId}" class="rateId">
															<a class="btn btn-primary sizeItem" 
																data-ref="${rate.ratioPrice}"> 
																<span>${rate.foodSize.foodSizeName}</span>
															</a>
														</c:if>
													</c:forEach>	
												</div>
											</div>
											<div class="ljm-price-mark">
												￥<span class="ljm-price-num">${food.foodprice }</span>
											</div>
											<div class="popover fade left in"></div>
											<div class="foodsdetail">
												<a class="foodsdetail-a " tabindex="0" role="button"
													data-toggle="popover" data-trigger="focus"
													title="${food.foodName }"
													data-content="${food.description }"> 商品详情</a>
											</div>
											<p class="OrderBtnCenter">
												<c:choose>
													<c:when test="${not empty sessionScope.user }">
														<button class="btn btn-warning OrderBtn orderNowBtn" role="button" data-ref="" >立即下单</button>
													</c:when>
													<c:otherwise>
														<button class="btn btn-warning OrderBtn orderNowBtn" role="button" data-ref="" disabled="disabled">立即下单</button>
													</c:otherwise>
												</c:choose>
											</p>
										</div>
									</div>
								</div>
							</form>
						</c:forEach>
					</div>
				</div>
			</div>
			
			
			<!-- 套餐推介 -->
			<div class="panel panel-default opacity noBorder litHeight">
				<div class="panel-heading" style="background: rgba(0, 0, 0, 0);">
					<span class="blackOpacity  recommend">套餐推介</span>
				</div>
				<div class="panel-body">
					<div class="row opacity">
						<c:forEach var="food" items="${requestScope.setmeaList }" end="2">
							<form action="ShoppingCar" method="get">
								<input type="hidden" class="selectedId" name="selectedId"/>
								<div class="col-sm-6 col-md-4">
									<div class="thumbnail opacity noBorder blackOpacity">
										<img src="image/foods/${food.imageFile }" alt="...">
										<div class="caption">
											<h3 style="margin-top: 20px;">${food.foodName }</h3>
											<div class="btn-toolbar">
												<div class="btn-group" style="margin-top: 20px; width: 1110px;">
													<div class="btn btn-primary-active sizeItem">
														<span>份量</span>
													</div>
													<c:forEach var="rate" items="${requestScope.ratelist }">
														<c:if test="${food.fId==rate.food.fId }">
															<input type="hidden" value="${rate.rateId}" class="rateId">
															<a class="btn btn-primary sizeItem" 
																data-ref="${rate.ratioPrice}"style="width: 80px;"> 
																<span>${rate.foodSize.foodSizeName}</span>
															</a>
														</c:if>
													</c:forEach>	
												</div>
											</div>
											<div class="ljm-price-mark">
												￥<span class="ljm-price-num">${food.foodprice }</span>
											</div>
											<div class="popover fade left in"></div>
											<div class="foodsdetail">
												<a class="foodsdetail-a " tabindex="0" role="button"
													data-toggle="popover" data-trigger="focus"
													title="${food.foodName }"
													data-content="${food.description }"> 商品详情</a>
											</div>
											<p class="OrderBtnCenter">
												<c:choose>
													<c:when test="${not empty sessionScope.user }">
														<button class="btn btn-warning OrderBtn orderNowBtn" role="button" data-ref="" >立即下单</button>
													</c:when>
													<c:otherwise>
														<button class="btn btn-warning OrderBtn orderNowBtn" role="button" data-ref="" disabled="disabled">立即下单</button>
													</c:otherwise>
												</c:choose>
											</p>
										</div>
									</div>
								</div>
							</form>
						</c:forEach>
						
					</div>
				</div>
			</div>
		</div>
		<!--最新活动-->
		<div class="row">
	        <div class="panel panel-default opacity noBorder low">
	            <div class="panel-heading" style="background:rgba(0,0,0,0);"><span class="recommend">最新活动</span></div>
	            <div class="panel-body">
	                <div class="row">
	                    <div class="col-xs-6 col-md-6">
	                        <a href="#" class="thumbnail">
	                            <img src="image/news/news01.jpg" alt="...">
	                        </a>
	                    </div>
	                    <div class="col-xs-6 col-md-6">
	                        <a href="#" class="thumbnail">
	                            <img src="image/news/news02.jpg" alt="...">
	                        </a>
	                    </div>
	                </div>
	            </div>
	        </div>
	    </div>

		<!--尾部-->
		<c:import url="/shared/footer.jsp" />
		<!--尾部结束-->
	</div>


</body>
</html>